<template>
	<view class="box">
		<view class="header">
			<view class="header-left"><text>近一年</text></view>
			<view class="example-body">
				<uni-datetime-picker
					v-model="Data.single"
					type="daterange"
					@maskClick="maskClick"
					@change='dateChange'
				>
					<view class="picker">
						<text>选择时间</text>
						<view class="iconfont icon-xiangxia1"></view>
					</view>
				</uni-datetime-picker>
			</view>
		</view>
		<view class="content" v-for="v in Data.data" :key="v.id">
			<view class="content-left">
				<text>{{v.pathologyReportName}}</text>
				<view class="">
					<text>{{v.department}}</text>
					<text>{{v.doctor}}</text>
				</view>
				<text>{{v.checkDate}}</text>
			</view>
			<view class="content-right" @click="ViewDetails(v.id,v.patient.id)">
				<text>查看详情</text>
			</view>
		</view>
		<view class="footer"></view>
	</view>
</template>

<script setup>
import {ReportQueryApi} from '@/api/ViewServices'
import { reactive, onMounted } from 'vue'
import {onLoad} from "@dcloudio/uni-app"
import {reportFormStore} from '@/store/reportFormStore.js'

const store=reportFormStore()

let Data = reactive({
	single: '',
	checkType:'',
	data:'',
	patient:''
})
let dateChange = (e) => {
		Data.single = e
		render()
}
let ViewDetails=(reportId,patientId)=>{
	if(Data.checkType!=3){
		uni.navigateTo({
			url: `/pages/reportSel/reportDetail/reportDetail`
		})
	}else{
		uni.navigateTo({
			url: `/pages/reportSel/examinationReport/examinationReport?reportId=${reportId}&patientId=${patientId}`
		})
	}
}
let maskClick = () => {

}
let render=()=>{
	ReportQueryApi({checkType:Data.checkType,createDate:Data.single[0],endDate:Data.single[1]}).then(({data})=>{
		Data.data=data.data
		store.reportList=data.data
	})
}
onLoad((option)=>{
	Data.checkType=option.checkType
})
onMounted(() => {
	Data.single=store.Date
	render()
})
</script>

<style scoped lang="less">
.box {
	width: 750rpx;
	background-color: #fbfdff;
}

.header {
	width: 688rpx;
	height: 72rpx;
	padding: 46rpx 30rpx 32rpx 30rpx;
	display: flex;

	.header-left {
		width: 130rpx;
		height: 52rpx;
		background-color: #006eff;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		text {
			color: white;
			font-size: 26rpx;
		}
	}

	.picker {
		width: 180rpx;
		height: 52rpx;
		margin-left: 36rpx;
		background-color: #e4f0ff;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: #4294ff;

		.iconfont {
			font-size: 20rpx;
			margin-left: 12rpx;
		}
	}
}

.content {
	width: 688rpx;
	height: 200rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 30rpx 26rpx 30rpx;
	box-shadow: 0 0 3px #e0e0e0;
	background-color: #ffffff;

	.content-left {
		width: 276rpx;
		height: 130rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 26rpx;
	}

	.content-left>text:nth-child(1) {
		font-size: 30rpx;
	}

	.content-left view{
		font-size: 24rpx;
		color: #b0b0b0;
		text{
			margin-right: 10rpx;
		}
	}
	.content-left text:nth-child(3) {
		font-size: 24rpx;
		color: #b0b0b0;
	}

	.content-right {
		margin-right: 30rpx;

		text {
			font-size: 30rpx;
			color: #006eff;
		}
	}
}

.footer {
	width: 750rpx;
	height: 200rpx;
}
</style>
